revision:
<div>
<nav class="main-nav">
<div class="container">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Profile</a>
<a href="#">Contact</a>
</div>
</nav>
<div class="content">
<h4>Main Content Here!</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum . . . .
</div>
</div>
<style>
h4 {font-size:2vw; text-align:left; margin-left:-2vw;}
nav.main-nav {background:#fff; height:3vw; border-bottom:0.2vw solid #dadada;text-align: center;}
nav.main-nav a {font-family:'Lato',sans-serif; font-size:1.5vw; text-decoration:none; display:inline-block;
padding:1vw 1.2vw; color:#27ae60;}
.container {display: inline; margin:0 auto;}
nav.main-nav.stickytop {position:fixed; top:0;}
.content {color:#222; padding:2vw; -webkit-column-count:2; -moz-column-count:2; column-count:2;
-webkit-column-gap:1vw; column-gap:1vw;}
.content h4 { margin:0;}
@media all and (min-width: 360px) and (max-width: 480px) {
nav.main-nav a {font-size:1vw;}
nav.main-nav {height:4vw;}
.container {margin:0 auto; width:50%;}
.content {-webkit-column-count:1; -moz-column-count:1; column-count:1;}
}
@media screen and (max-width: 480px) {
nav.main-nav a {font-size:1vw;}
nav.main-nav {height:4vw;}
.container {width:92%;}
.content {-webkit-column-count:1; -moz-column-count:1; column-count:1;}
}
</style>
<script>
$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$('nav.main-nav').addClass('stickytop');
}
else {
$('nav.main-nav').removeClass('stickytop');
}
});
});
</script>
<div id="div2">
<div class="menu-btn">
<i class="fa fa-times"></i>
</div>
<div class="side-bar">
<div class="close-btn">
<i class="fa fa-times"></i>
</div>
<div class="menu">
<div class="item"><a href="#"><i class="fa fa-home"></i>Home</a></div>
<div class="item">
<a class="sub-btn"><i class="fa fa-bullhorn"></i>Annoucement<
i class="fa fa-angle-right dropdown"></i></a>
<div class="sub-menu">
<a href="#" class="sub-item">Sub Item A</a>
<a href="#" class="sub-item">Sub Item B</a>
<a href="#" class="sub-item">Sub Item C</a>
</div>
</div>
<div class="item"><a href="#"><i class="fa fa-book-reader"></i>About Us</a></div>
<div class="item">
<a class="sub-btn"><i class="fas fa-cube"></i>Our Program<
i class="fa fa-angle-right dropdown"></i></a>
<div class="sub-menu">
<a href="#" class="sub-item">Sub Item A</a>
<a href="#" class="sub-item">Sub Item B</a>
</div>
</div>
<div class="item"><a href="#"><i class="fa fa-envelope"></i>Email</a></div>
</div>
</div>
<main>
<h3>Sidebar Menu with Sub-Menu</h3>
</main>
</div>
<style>
.menu-btn, .close-btn{position: relative; top: 2vw; right: 2vw; font-size: 2vw; color: #fff;
cursor: pointer;}
.side-bar{ position: fixed; top: 0; right: -100%; width: 15vw; height: 100%; overflow-y: auto;
background: rgba(0, 0, 0, 0.5); transition: 0.6s ease; transition-property: right; }
.side-bar.active{right: 0;}
.side-bar .menu {width: 100%; margin-top: 2vw;}
.side-bar .menu .item{cursor: pointer;}
.side-bar .menu .item a {display: flex; align-items: center; text-decoration: none;
line-height: 3vw; color: #fff; padding: 0.4vw 2.8vw;}
.side-bar .menu .item a:hover{background: #f19d56; transition: 0.4s;}
.side-bar .menu .item i {margin-right: 1vw;}
.side-bar .menu .item a .dropdown{position: absolute; right: 1.4vw; transition: 0.4s;}
.side-bar .menu .item a .dropdown.rotate{transform: rotate(90deg);}
.side-bar .menu .item .sub-menu{display: none; background: rgba(255, 255, 255, 0.1);}
.side-bar .menu .item .sub-menu a {padding-left: 6vw;}
main {display: flex; justify-content: center; align-items: center; height: 50vh;
padding: 0 2vw;}
main h3{ width: 40vw;font-size: 3vw; text-align: center;line-height: 4vw; color: #fff;
-webkit-text-stroke: 0.8vwpx rgba(0, 0, 0, 0.8);text-shadow: 0.2vw 0.2vw 1.2vw rgba(0, 0, 0, 0.4);}
@media (max-width: 720px) {
main h3{width: 100%; font-size: 2vw;line-height: 2vw;}
}
</style>
<script>
$(document).ready(function(){
$('.sub-btn').click(function(){
$(this).next('.sub-menu').slideToggle();
$(this).find('.dropdown').toggleClass('rotate')
});
$('.menu-btn').click(function(){
$('.side-bar').addClass('active');
$('.menu-btn').css("visibility", "hidden")
});
$('.close-btn').click(function(){
$('.side-bar').removeClass('active');
$('.menu-btn').css("visibility", "visible")
});
});
</script>
<div id="div3">
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild"><ahref="javascript:#">Home</a>
<div class="menuInfo">I am some text about the home section</div>
</li>
<li>
<a href="javascript:#">Services</a>
<div class="menuInfo">I am some text about the services section</div>
</li>
<li>
<a href="javascript:#">Clients</a>
<div class="menuInfo">I am some text about the clients section</div>
</li>
<li>
<a href="javascript:#">Portfolio</a>
<div class="menuInfo">I am some text about the portfolio section</div>
</li>
<li>
<a href="javascript:#">About</a>
<div class="menuInfo">I am some text about the about section</div>
</li>
<li>
<a href="javascript:#">Blog</a>
<div class="menuInfo">I am some text about the blog section</div>
</li>
<li>
<a href="javascript:#">Follow</a>
<div class="menuInfo">I am some text about the follow section</div>
</li>
<li>
<a href="javascript:#">Contact</a>
<div class="menuInfo">I am some text about the contact section</div>
</li>
</ul>
</div>
</div>
<style>
menuBarHolder {width: 40VW; height:4.5VW; background-color:#000; color:#fff; font-family:Arial;
font-size:1.4VW; margin-top:1vw;}
#menuBarHolder ul{ list-style-type:none; display:block;}
/* #container { margin-top:100px;} */
#menuBar li{ float:left; padding:1vw; height:1.6vw; width:4vw; border-right:0.1vw solid #ccc; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#999;}
.firstchild { border-left:1px solid #ccc;}
.menuInfo { cursor:hand; background-color:#000; color:#fff; width:6vw; font-size:1vw;height:10vw;
padding:0.3vw; display:none; position:relative; margin-left:-1.5vw; margin-top:-1.5vw;
-moz-border-radius-bottomright: 0.5vw; -moz-border-radius-bottomleft: 0.5vw;
-webkit-border-bottom-left-radius: 0.5vw; -webkit-border-bottom-right-radius: 0.5vw;
-khtml-border-radius-bottomright: 0.5vw; -khtml-border-radius-bottomleft: 0.5vw;
border-bottom-right-radius: 0.5vw; border-bottom-left-radius: 0.5vw;}
</style>
<script>
$(document).ready(function()
{
$('#menuBar li').click(function()
{
var url = $(this).find('a').attr('href');
document.location.href = url;
});
$('#menuBar li').hover(function()
{
$(this).find('.menuInfo').slideDown();
},
function()
{
$(this).find('.menuInfo').slideUp();
});
});
</script>